'use client'
import { cn } from '@/lib/utils'
import Link from 'next/link'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { usePathname } from 'next/navigation'

import AiImageIcon from '@/assets/icons/aiimage.svg'
import AiVideoIcon from '@/assets/icons/aivideo.svg'
import LibraryIcon from '@/assets/icons/library.svg'

interface SidebarItemProps {
  Icon: React.ComponentType<{ width: number; height: number }>
  label: string
  value: string
  href: string
}

const sidebarItems: SidebarItemProps[] = [
  {
    Icon: AiImageIcon,
    label: 'AI Images & text',
    value: 'graphic',
    href: '/graphic',
  },
  {
    Icon: AiVideoIcon,
    label: 'AI Videos',
    value: 'video',
    href: '/movie',
  },
  {
    Icon: LibraryIcon,
    label: 'Library',
    value: 'resources',
    href: '/mysource',
  },
]

export function Sidebar() {
  const pathname = usePathname()

  return (
    <aside className="relative min-w-[260px]">
      <Tabs value={pathname} orientation="vertical" className="h-full">
        <TabsList className="flex justify-start flex-col h-full p-4 gap-2">
          {sidebarItems.map((item) => (
            <Link
              className="block w-full"
              key={item.value}
              href={item.href}
              passHref
            >
              <TabsTrigger
                value={item.href}
                className={cn(
                  'text-white rounded-full justify-start space-x-2 w-full hover:text-[#B9AEFF]',
                  'data-[state=active]:text-[#B9AEFF] data-[state=active]:bg-[#B9AEFF]/10',
                )}
              >
                <item.Icon width={20} height={20} />
                <span>{item.label}</span>
              </TabsTrigger>
            </Link>
          ))}
        </TabsList>
      </Tabs>
      {/* <UserSetting></UserSetting> */}
    </aside>
  )
}
